<template>
	<span class="custom_checkbox" :class="{'on':isChecked}" @click="checkedChange($event)">
		<i class="custom_checkbox_box"></i>
	</span>
</template>

<script>
	export default {
		name: "CustomCheckbox",
		props:["isChecked", "name"],
		data: function(){
			return{
				
			}
		},
		methods:{
			checkedChange(e){
				this.isChecked === true ? this.$emit("customCheckboxChang", false, this.name) : this.$emit("customCheckboxChang", true, this.name);
			}
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.custom_checkbox{
		background-color:#999999;
		border-radius: 30/@base;
		width:80/@base;
		height:30/@base;
		overflow:hidden;
		display:inline-block;
		vertical-align: middle;
		magring:0 10/@base;
		&.on{
			background-color:#00FF00;
			i{
				&.custom_checkbox_box{
					float:right;
				}
			}
		}
		i{
			display:inline;
			&.custom_checkbox_box{
				float:left;
				width:30/@base;
				height:30/@base;
				border-radius: 30/@base;
				overflow:hidden;
				background-color: #fff;
			}
		}
	}
</style>
